<template>
  <div class="empty">
    <div>
      <h3>Ymob-Chat</h3>
      <p>欢迎来到我的聊天室</p>
      <p><a href="https://gitee.com/symob/chat" target="_blank">项目地址</a></p>
      <p><a href="http://blog.ymob.top" target="_blank">我的博客</a></p>
      <p
        class="error"
        v-html="serverError"
      ></p>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Empty',
  computed: {
    ...mapState([
      'serverError'
    ])
  }
}
</script>

<style lang="stylus" scoped>
  .empty
    height 720px
    display flex
    align-items center
    div
      width 100%
      padding-bottom 100px
      h3, p
        color #555
        text-align center
      h3
        font-size 36px
      p
        font-size 14px
        margin-top 15px
      p.error
        color red
</style>
